<template>
	<view class="index-nav-box">
		<view class="nav-item" v-for="(one,index) in navList" :key="index" @click="goTo(one.to)">
			<view class="nav-item-pic">
				<image class="image" :src="one.src" mode="" />
			</view>
			<view class="nav-item-cont">
				{{one.cont}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
					src: this.imagesUrl('nav-shopping-mall.png'),
					cont: '商城',
					to: '/pages/shop/shop'
				}, {
					src: this.imagesUrl('nav-burst.png'),
					cont: '爆团',
					to: '/pages/boom/boom'
				}, {
					src: this.imagesUrl('nav-hit-card.png'),
					cont: '签到',
					to: '/pages/sign/sign'
				}, {
					src: this.imagesUrl('nav-coupon.png'),
					cont: '领券中心',
					to: '/pages/coupon/coupon'
				}, {
					src: this.imagesUrl('nav-new-people.png'),
					cont: '邀请新人',
					to: '/pages/other/invite'
				}]
			}
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 主页nav盒子 */
	.index-nav-box {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 50rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 36rpx;
		color: #333;
		background-color: #fff;

		.image {
			width: 96rpx;
			height: 96rpx;
		}
	}
</style>